﻿@{
    ViewBag.Title = "packageService";
    Layout = "/Views/Shared/_Layout_iframe.cshtml";
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PackageService</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="/Assets/xlsx/xlsx.full.min.js"></script>
    <script src="/Assets/xlsx/xlsx.full.util.js"></script>
    <style>
        /* 自定义样式 */
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f4f4f9;
            color: #333;
        }

        .card {
            background-color: #fff;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            padding: 1.5rem;
            margin: 1rem;
        }

        .table-title {
            cursor: pointer;
            font-size: 1.25rem;
            font-weight: 600;
            margin-right: 1rem;
            transition: color 0.3s ease;
        }

            .table-title.active {
                color: #2aecdc;
            }

            .table-title:hover {
                color: #2aecdc;
            }

        .table-container {
            display: none;
        }

            .table-container.active {
                display: block;
            }

        .table {
            width: 100%;
            border-collapse: collapse
        }

            .table th,
            .table td {
                padding: 0.75rem 1rem;
                text-align: left;
                border-bottom: 1px solid #e2e8f0;
            }

            .table th {
                background-color: #edf2f7;
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 0.05em;
            }

            .table tbody tr:nth-child(even) {
                background-color: #f7fafc;
            }

            .table tbody tr:hover {
                background-color: #edf2f7;
            }
    </style>
</head>

<body class="p-4">
    <div class="card">
        <div class="flex mb-4">

            <div class="flex-1">
                <!-- 左侧标题容器 -->
                <span class="table-title active" id="togglePackageIn">套餐内服务</span>
                <span class="table-title" id="togglePackageOut">套餐外服务</span>
            </div>
            <button class="layui-btn layui-btn-primary layui-border-black ml-auto" id="saveToExcel">打印清单</button>
        </div>
        <div class="table-container active" id="testPackageInContainer">
            <table class="table layui-hide" id="testPackageIn" lay-filter="testPackageIn"></table>
        </div>
        <div class="table-container" id="testPackageOutContainer">
            <table class="table layui-hide" id="testPackageOut" lay-filter="testPackageOut"></table>
        </div>
        <input type="hidden" name="Id" id="hfid" value="@ViewBag.Id" />
        <button type="button" class="layui-btn layui-btn-lg" id="quit" lay-event="quit" style="margin-top:30px;">退房</button>
    </div>
    <script type="text/html" id="typeTpl">
        {{#  if(d.Type == 2){ }}
        <span >服务</span>
        {{#  } else { }}
        <span >商品</span>
        {{#  } }}
    </script>
    <script>
        var table;
        var table;
        var packageInRendered = false;
        var packageOutRendered = false;
        var packageInData = [];
        var packageOutData = [];
        let ContractId = $("#hfid").val();
        console.log(ContractId);
        var dt =0;
        layui.use(['table', 'util', 'tree', 'form', 'layer'], function () {
            table = layui.table;
            var util = layui.util;
            var form = layui.form;
            var layer = layui.layer;
            // 渲染表格
            table.render({
                elem: '#testPackageOut',
                url: '/PackageSpend/PackagesOutDetail',
                toolbar: '',
                defaultToolbar: [],
                height: 'full-200',
                cellMinWidth: 90,
                page: {
                    limit: 10
                },
                method: 'POST',  // 指定请求方式为 POST
                where: {  // 传递额外参数
                    ContractId: ContractId
                },
                cols: [
                    [
                        { type: 'checkbox', fixed: 'left' },
                        { field: 'SpendName', title: '消费名称' },
                        { field: 'Type', title: '类型', templet: '#typeTpl' },
                        {
                            field: 'Balance', title: '余额' },
                        { field: 'Price', title: '价格' },
                        { field: 'ConsCount', title: '数量' },
                        {
                            field: 'CreateTime',
                            title: '服务创建时间',
                            templet: (d) => {
                                if (d.CreateTime) {
                                    return util.toDateString(d.CreateTime.replace('/Date(', '').replace(')/', ''), 'yyyy-MM-dd ')
                                }
                            }
                        },
                        {
                            field: 'ActualTime',
                            title: '服务执行时间',
                            templet: (d) => {
                                if (d.ActualTime) {
                                    return util.toDateString(d.ActualTime.replace('/Date(', '').replace(')/', ''), 'yyyy-MM-dd ')
                                }
                                else {
                                    return ""
                                }
                            }
                        }
                    ]
                ],

            });

            // 渲染表格
            table.render({
                elem: '#testPackageIn',
                url: '/PackageSpend/PackagesInDetail',
                toolbar: '',
                defaultToolbar: [],
                height: 'full-200',
                cellMinWidth: 90,
                page: {
                    limit: 10
                },
                method: 'POST',  // 指定请求方式为 POST
                where: {  // 传递额外参数
                    ContractId: ContractId
                },
                cols: [
                    [
                        { type: 'checkbox', fixed: 'left' },
                        { field: 'ServiceName', title: '服务名称' },
                        { field: 'ServicePrice', title: '服务价格' },
                        {
                            field: 'ActualTime',
                            title: '服务执行时间',
                            templet: (d) => {
                                if (d.ActualTime) {
                                    return util.toDateString(d.ActualTime.replace('/Date(', '').replace(')/', ''), 'yyyy-MM-dd ')
                                } else {
                                    return "服务时间待定";
                                }
                            }
                        },
                        { field: 'Name', title: '服务执行人' },
                        { field: 'FeedBack', title: '服务反馈' }
                    ]
                ],


            });

            // 点击套餐内服务标题
            document.getElementById('togglePackageIn').addEventListener('click', function () {
                document.getElementById('togglePackageIn').classList.add('active');
                document.getElementById('togglePackageOut').classList.remove('active');
                document.getElementById('testPackageInContainer').classList.add('active');
                document.getElementById('testPackageOutContainer').classList.remove('active');
            });

            // 点击套餐外服务标题
            document.getElementById('togglePackageOut').addEventListener('click', function () {
                document.getElementById('togglePackageOut').classList.add('active');
                document.getElementById('togglePackageIn').classList.remove('active');
                document.getElementById('testPackageOutContainer').classList.add('active');
                document.getElementById('testPackageInContainer').classList.remove('active');
            });
            //点击退房事件
            $('#quit').on('click', function () {
                // 获取合同ID
                var contractId = ContractId;
                //console.log(ContractId);
                if (!contractId) {
                    layer.msg('无法获取合同信息');
                    return;
                }
                layer.confirm('确定要退房吗？', function (index) {
                    //ajax
                    $.post("/PackageSpend/CheckOutQuit", { contractId: contractId }, function (resp) {
                        if (resp.code === 0) {
                            layer.msg('退房成功');
                            parent.layui.table.reload('testPackageOut');

                        }
                    });
                    layer.close(index);
                });
            });
            // 保存为 Excel 功能
            document.getElementById('saveToExcel').addEventListener('click', function (e) {
                console.log(ContractId)
                e.preventDefault();
                if (confirm("您确定要打印消费清单吗？")) {
                    // 直接跳转到下载接口（自动携带表单参数）
                    window.location.href = `/PackageSpend/ServiceDetail?ContractId=${ContractId}`;
                }
            });
        });
    </script>
</body>

</html>    